<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <!-- <el-form-item label="标题" prop="search">
            <el-input
              v-model="searchForm.search"
              placeholder="请输入标题"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value="" />
              <el-option
                v-for="(oVal, oIdx) of status"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间" prop="$createTime">
            <el-date-picker
              v-model="searchForm.$createTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="回复时间" prop="$replyTime">
            <el-date-picker
              v-model="searchForm.$replyTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-table :data="tableData" border>
        <el-table-column prop="title" label="标题" show-overflow-tooltip />
        <el-table-column prop="nickname" label="用户" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="{ row }">
            <span :class="statusClass[row.status]">{{
              statusObj[row.status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="180"
          align="center"
        />
        <!-- <el-table-column
          prop="reply_date"
          label="处理时间"
          width="180"
          align="center"
        /> -->
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="openEditRow(row, 'builingForm', initInfoCard)"
              >{{ row.status === 2 ? "查看详情" : "查看并回复" }}</el-button
            >
            <!-- <el-button
              type="text"
              class="red"
              @click="delRowById(row, row.title)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="pagination.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pagination.page_size"
        :total="tableTotal"
        @size-change="(val) => (pagination.page_size = val)"
        @current-change="(val) => (pagination.page = val)"
      />
    </footer>
    <!-- 回复 -->
    <el-dialog
      :title="(builingForm.$id ? '查看' : '新增') + '特殊施工上报'"
      :visible.sync="showAddOrEdit"
      width="888px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        :rules="builingRules"
        ref="builingForm"
        label-width="6em"
      >
        <el-form-item prop="$id" hidden />
        <!-- <InfoCard v-model="repairInfo" /> -->

        <el-form-item label="标题" prop="title">
          <el-input
            v-model="builingForm.title" :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input
            v-model="builingForm.content" :disabled="true"
            type="textarea"
            row="6"
            placeholder="请输入说明"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="图片"
          prop="$imgs"
        >
          <Preview :imgs="builingForm.$imgs" />
        </el-form-item>
        <el-divider />
        <el-form-item
          prop="$replyArr"
          class="reply_ipt"
          v-if="builingForm.$status === 1"
          label="回复如下"
        >
          <span class="time">{{ builingForm.$replyArr[0] }}</span>

        </el-form-item>
        <el-form-item prop="remarks">
          <el-input
            v-model="builingForm.remarks"
            :readonly="builingForm.$status === 2"
            type="textarea"
            row="6"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer v-if="builingForm.$status == 1">
        <el-button type="primary" @click="submitRowData('builingForm')"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit, status } from "@/utils/mixins";
// import InfoCard from "@/components/InfoCard.vue";
import Preview from "@/components/Preview.vue";

const MAPS = {
  reportMap: {
    标题: "title",
    申请人: "nickname",
    创建时间: "create_time",
    内容: "content",
  },
};
export default {
  mixins: [table, addOrEdit, status],
  components: {
    // InfoCard,
    Preview,
  },
  data: () => ({
    searchForm: {
      $action: ["getConsultList", "delConsult"],
      search: "",
      status: "",
      $createTime: [],
      $replyTime: [],
    },
    builingForm: {
      $action: ["addConsult", "editConsult"],
      remarks: "",
      $imgs: [],
      $replyArr: [],
      $status: 0,
    },
    builingRules: {},
    showReportInfo: false,
    showReply: false,

    // showAddOrEdit: true,

    repairInfo: {}, // 详情
  }),
  watch: {
    "searchForm.$createTime"(time) {
      let [create_time__gt, create_time__lt] = time || [];
      Object.assign(this.searchForm, { create_time__gt, create_time__lt });
    },
    "searchForm.$replyTime"(time) {
      let [reply_date__gt, reply_date__lt] = time || [];
      Object.assign(this.searchForm, { reply_date__gt, reply_date__lt });
    },
  },
  methods: {
    async initInfoCard({ source, row }) {
      let { data } = await API.getConsultInfo(row.id);
      source.remarks = data.remarks;
      source.title=data.title;
      source.content=data.content;
      source.$status = data.status;
      source.$replyArr[0] = data.headle_time;
      source.$imgs = data.images.map((v) => ({
        name: "",
        url: v.img,
      }));
      this.repairInfo = _.cloneDeepWith(MAPS.repairMap, (path) =>
        _.get(data, path)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
  .privew_img {
    width: 200px;
    height: 200px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  ::v-deep {
    .el-input.is-disabled .el-input__inner ,
    .el-textarea.is-disabled .el-textarea__inner{
      font-size:16px;
      color:#333;
    }
  }
</style>
